<!--  -->
<template>
  <div class="material-news-main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章搜索</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-input v-model="search.title" placeholder="根据文章标题搜索" class="searchBox"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input v-model="search.author" placeholder="根据作者搜索" class="searchBox"></el-input>
        </el-col>
        <el-col :span="8" style="text-align:right">
          <el-button type="primary" plain @click="doreset" size="small">重置</el-button>
          <el-button type="primary" @click="dosearch" size="small">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header">
        <el-row>
          <el-col :span="12">
             <span>文章列表</span>
          </el-col>
          <el-col :span="12" style="text-align:right">
              <el-button type="primary" size="small" @click="doNewsAdd" >新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-pagination
        style="text-align:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
      ></el-pagination>
      <el-table :data="newsList" border style="width: 100%" v-loading="loading">
        <el-table-column fixed type="index" label="#" width="60"></el-table-column>
        <el-table-column prop="title" label="文章标题" width="150"></el-table-column>
        <el-table-column prop="author" label="作者" width="120"></el-table-column>
        <el-table-column prop="desc" label="描述信息" width="120"></el-table-column>
        <el-table-column prop="content1" label="文章内容" width="280">
           <template slot-scope="scope">
               <div class="articleContent" v-html='scope.row.content1'></div>
            </template>
        </el-table-column>
        <el-table-column prop="cover" label="封面图片" width="280">
           <!-- 通过插槽的方式将图片渲染出来 -->
            <template slot-scope="scope">
                <img class="image" :src="scope.row.cover" alt="加载失败">
            </template>
        </el-table-column>
        <el-table-column prop="hot" label="是否最热" width="100">
            <template slot-scope="scope">
                 {{scope.row.hot=="0"?'否':'热门'}}
            </template>
        </el-table-column>
        <el-table-column  label="阅读量/赞" width="120">
            <template slot-scope="scope">
                 <span>{{scope.row.viewCount+'/'+ scope.row.viewCount}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" style="color:orange" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="doDel(scope.row.id)" style="color:red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { newsList, newsDel } from "@/api/material/news";
import _ from "lodash";
export default {
  data() {
    return {
      loading: false,
      search: {},
      newsList: [],
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30],
        totalcount: 0,
      },
 
    };
  },
  created() {
    this.getNewsList();
   
  },
  methods: {   
    dosearch() {
      this.getNewsList();
    },
    doreset() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getNewsList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getNewsList();
    },
    handleClick(row) {
      console.log(row);
    },
    getNewsList() {
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      //去掉无效属性
      params = _.pickBy(params, (item) => item);
      _.pickBy(params, function (v) {
        return v;
      });

      newsList(params).then((res) => {
        this.newsList = res.data.list;
        this.page.totalcount = res.data.totalRow;
        this.loading = false;
      });
    },
    doEdit(id){
      //  console.log(id)
       this.$router.push({name:"manewsEdit",params:{id}})//传递id给名为manewsEdit的页面
    },
    doDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          newsDel({ id }).then((res) => {
            var index = this.newsList.findIndex((item) => {
              item.id == id;
            });
            this.newsList.splice(index, 1);
            this.getNewsList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    doNewsAdd(){
       this.$router.push({name:"manewsAdd"})
    }
  },
};
</script>
<style lang='scss' scoped>
.box-card {
  margin: 30px;
}
.searchBox {
  width: 220px;
}
.image{
   width: 80%;
   height: 150px;
   margin-left: 10%;
}
.articleContent{
  height: 180px;
  img{
    width: 80%;
    height: 150px;
  }
}
</style>